<template>
  <div class="login_page">
    <el-card class="box-card">
      <img
        class="box_img"
        src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
        alt=""
      />
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="loginName">
          <el-input
            style="font-size: 10px"
            placeholder="请输入账号"
            prefix-icon="el-icon-mobile-phone"
            v-model="form.loginName"
          ></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            suffix-icon="el-icon-view"
            v-model="form.password"
          ></el-input>
        </el-form-item>

        <el-form-item prop="code">
          <el-input
            placeholder="请输入验证码"
            v-model="form.code"
            prefix-icon="el-icon-moon"
          ></el-input>
          <img
            class="clientToken_img"
            @click="getVerificationImg"
            :src="verificationImg"
            alt=""
          />
        </el-form-item>

        <el-form-item class="tc">
          <el-button @click="login" type="primary">登 录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { login, getClient } from '@/api/user'
export default {
  name: 'login-page',
  data () {
    return {
      form: {
        loginName: '',
        password: '',
        code: '',
        loginType: '0',
        clientToken: 'qGYlfOrAscRs1jMYuyl5Cz4C4Ra1Y93Jp'
      },
      rules: {
        loginName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change']
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change']
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['blur', 'change']
          }
        ]
      },
      verificationImg: ''
    }
  },
  methods: {
    async login () {
      try {
        const valid = await this.$refs.form.validate()
        if (valid) {
          const res = await login(this.form)
          console.log(res)
          if (res.msg === '登录成功') {
            this.$store.commit('user/setUserToken', res.token)
            this.$router.push('/')
          }
        }
      } catch (e) {
        console.log(e)
      }
    },
    async getVerificationImg () {
      const res = await getClient()
      console.log(res)
      // 将接口返回的图片转换一个本地的http格式的url路径
      this.verificationImg = window.URL.createObjectURL(res)
    }
  },
  mounted () {
    this.getVerificationImg()
  }
}

</script>

<style lang="scss" scoped>
.login_page {
  height: 1000px;
  width: 100%;

  background: url("http://likede2-admin.itheima.net/img/background.be4fae7d.png")
    no-repeat center/cover;
  .box-card {
    overflow: visible;
    width: 518px;
    height: 388px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    .box_img {
      position: absolute;
      width: 96px;
      height: 96px;
      top: -48px;
      left: 50%;
      transform: translateX(-50%);
    }
    .el-form {
      margin-top: 60px;
      margin-left: 20px;
      ::v-deep .el-input__inner {
        height: 52px;
        // width: 455px;
      }
      .clientToken_img {
        position: absolute;
        right: 0;
        height: 52px;
      }

      .el-button {
        width: 448px;
        height: 52px;
        color: #fff;
        background: linear-gradient(262deg, #2e50e1, #6878f0);
      }
    }
  }
}
</style>
